﻿//create the instances
var overlayElement = null;
var modalWindowElement = null;

//detect touch and then automatically assign events
var isTouchSupported = 'ontouchstart' in window.document;
var startEvent = isTouchSupported ? 'touchstart' : 'mousedown';
var moveEvent = isTouchSupported ? 'touchmove' : 'mousemove';
var endEvent = isTouchSupported ? 'touchend' : 'mouseup';

var vHeight = 0;
var vHeightPadding = 0;

//when window loads
if(window.attachEvent){
 window.attachEvent("onload", initialize, false);
}
else{
 window.addEventListener("load", initialize, false);
}

window.addEventListener('orientationchange', function(){orientationChg();}, false); 

function orientationChg(){
	//handleResize();
}

//$(document).ready(function(){
//	$("#popUpBtn").click(function(){
//		
//		var selectedValue = "";
//		
//		if($.trim($("#text_swbeonho").attr("value")) == ""){
//			alert("사원번호를 입력하여 주십시오.");
//			$("#text_swbeonho").focus();
//			return false;
//		}
//				
//				
//				
//		$.ajax({
//			type:"POST",
//			url:"./index_action.jsp",
//			cache:false,
//			data:"selectedValue="+selectedValue,
//			success:onSuccess,
//			error:onError
//		});
//		
//		return false;
//	});
//});

function initialize() {	
		vHeight = window.innerHeight;
		
		if(vHeight > 460){
			vHeightPadding = 50;
		}	

    setTimeout(function() { window.scrollTo(0, 1); }, 10); //to hide the address bar
    document.getElementById("popUpBtn").addEventListener(endEvent, function() {
    	
    	
      showPopUpMessage(createPopUpHeader("최대 2개까지 선택 가능"),createPopUpContent(""),window.innerWidth,window.innerHeight - vHeightPadding);
    }, false);
}

//when window is resized
window.addEventListener("resize",handleResize,false); //resizing is useful only when popups are opened
//re-position the modal pop up to the center of the page
function handleResize()
{          
		vHeight = window.innerHeight;
		
		if(vHeight > 460){
			vHeightPadding = 50;
		}		
	     
   if(modalWindowElement)
   {
       modalWindowElement.style.left = (window.innerWidth - modalWindowElement.offsetWidth) / 2  + "px";
       modalWindowElement.style.top = (window.innerHeight + vHeightPadding - modalWindowElement.offsetHeight) / 2  + "px";      
   }
}            
            
/* Common header for Pop Ups */
function createPopUpHeader(title)
{
    //return the header after creating
    
    //create header for modal window area
    modalWindowHeader = document.createElement("div");
    modalWindowHeader.className = "modalWindowHeader";
    modalWindowHeader.innerHTML = "<p>" + title + "</p>";
    
    return modalWindowHeader;
}
function createPopUpContent(msg)
{
    //return the content after creating
    
    //create modal window content area
    modalWindowContent = document.createElement("div");
    modalWindowContent.className = "modalWindowContent";
    
    var innerContent = "";
    innerContent += "<p style='text-align:center; margin-top:0px;'>" + msg + "</p>";
    
    for(var i=0; i<6; i++){
	    innerContent += "<table width='100%' height='35px' border='0' id='tableCont'>";    
	    innerContent += "<tr>";    
	    innerContent += "<td>";    
	    innerContent += "<img src='http://180.148.182.64:8080/emp_sf/vote/images/header.png'>";
	    innerContent += "</td>";    
	    innerContent += "<td>";    
	    innerContent += "신호등과 함께하는 빠르고 안전한 길";
	    innerContent += "</td>";    
	    innerContent += "<td>";    
	    innerContent += "<input type='checkbox' name='checkElement'"+i+" id='checkElement"+i+"'/>";
	    innerContent += "</td>";    
	    innerContent += "</tr>";    
	    innerContent += "</table>";   
	    innerContent += "<table width='100%' height='1px' border='0' padding='0' spacing='0'>";    
	    innerContent += "<tr style='height:1px;'>";    
	    innerContent += "<td>";    	    
	    innerContent += "</td>";    
	    innerContent += "<img src='http://180.148.182.64:8080/emp_sf/vote/images/divide.png' style='width:100%'>";    
	    innerContent += "</tr>";    
	    innerContent += "</table>";   	    
  	}  	  	
    
    modalWindowContent.innerHTML = innerContent;
    
    //create the place order button
    okBtn = document.createElement("div");
    okBtn.className = "redBtn okBtn";
    okBtn.innerHTML = "<p style='font-size:16px'>투표</p>";    
    okBtn.addEventListener(endEvent,function(){ doVote(); },false);
    
    modalWindowContent.appendChild(okBtn);
    
    okBtn2 = document.createElement("div");  
    okBtn2.className = "redBtn closeBtn";
    okBtn2.innerHTML = "<p style='font-size:16px'>취소</p>";     
    okBtn2.addEventListener(endEvent,function(){ hidePopUpMessage(); },false);
    
    modalWindowContent.appendChild(okBtn2);   
    
    var vWidth = window.innerWidth / 2 - 50 - 80;
    var vWidth2 = window.innerWidth / 2 - 50 + 80;
    
    okBtn.style.left = vWidth + "px";
    okBtn2.style.left = vWidth2 + "px";

    return modalWindowContent;
}

//show the modal overlay and popup window
function showPopUpMessage(modalWindowHeader,modalWindowContent,width,height) {
	
		vHeight = window.innerHeight;
		
		if(vHeight > 460){
			vHeightPadding = 50;
		}		

				
    overlayElement = document.createElement("div");
    overlayElement.className = 'modalOverlay';
    modalWindowElement = document.createElement("div");
    modalWindowElement.className = 'modalWindow';
                
    //position modal window element
    modalWindowElement.style.width = width + "px";
    modalWindowElement.style.height = height + "px";
    modalWindowElement.style.left = (window.innerWidth - width) / 2 + "px";
    modalWindowElement.style.top = (window.innerHeight + vHeightPadding - height) / 2 + "px";
    //add childs
    modalWindowElement.appendChild(modalWindowHeader);
    modalWindowElement.appendChild(modalWindowContent);
    document.body.appendChild(overlayElement);
    document.body.appendChild(modalWindowElement);
    setTimeout(function() {
        modalWindowElement.style.opacity = 1;
        overlayElement.style.opacity = 0.4;
        overlayElement.addEventListener(endEvent, hidePopUpMessage, false);
    }, 300);
}
//hide the modal overlay and popup window
function hidePopUpMessage() {
    modalWindowElement.style.opacity = 0;
    overlayElement.style.opacity = 0;
    overlayElement.removeEventListener(endEvent, hidePopUpMessage, false);
    setTimeout(function() {
        document.body.removeChild(overlayElement);
        document.body.removeChild(modalWindowElement);
    }, 400);         
}